<template>
  <el-aside
    class="h-full bg-[#fff]"
    style="border-right: 1px solid #6fbde1"
    width="255px"
  >
    <div class="w-full flex items-center justify-center pt-[10px] box-border">
      <img :src="logo" alt="" class="w-1/2 h-[100px]" />
    </div>
    <el-menu router :default-active="route.path">
      <template v-for="(item, index) in router.options.routes" :key="index">
        <template v-if="item.children">
          <el-sub-menu v-if="item?.meta?.keepAlive" :index="item.path">
            <template #title>
              <el-icon>
                <component :is="item?.meta?.icon" />
              </el-icon>
              {{ item?.meta?.title }}
            </template>
            <el-menu-item v-if="item.children" :index="item.children[0].path">{{
              item.children[0].meta?.title
            }}</el-menu-item>
            <el-menu-item v-if="item.children[1]" :index="item?.children[1]?.path">{{
              item?.children[1]?.meta?.title
            }}</el-menu-item>
          </el-sub-menu>
        </template>
        <template v-else>
          <el-menu-item v-if="item?.meta?.keepAlive" :index="item.path">
            <el-icon>
              <component :is="item?.meta?.icon" />
            </el-icon>
            {{ item?.meta?.title }}
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </el-aside>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import logo from "@/assets/imges/logo.png";
const router = useRouter();
const route = useRoute();

</script>

<style>
#app {
  padding: 0;
  margin: 0;
}
</style>
